<template>
	<view class="home">
		<view class="fix">
			<top-status></top-status>
			<view class="tabs wap">

				<view class="img2"></view>
					<view class="tab1" :class="{ 'tab4': tabInd == 0 }" @click="tabInd = 0">组局</view>
			</view>
			<scroll-view style="white-space: nowrap;width: 80%;" :scroll-x="true" :show-scrollbar="true" scroll-left="0"
				@scroll="whetherend">
				<view class="nav_">
					<view :class="['nav_item', navIndex == index ? 'nav_active' : 'nav_text']" v-for="(item, index) in nav"
						:key="index" @click="sel_tab(index)">
						{{ item }}
					</view>
				</view>
			</scroll-view>
			<view v-if="navIndex == 0" class="puadd" @click="publish(navIndex)">
				<image class="releaseimg" :src="ossPath + '/upload/17117649896281040.png'"></image>
				<view class="retext">发布</view>
			</view>
			<view v-if="navIndex == 1" class="puadd" @click="sendFun('教练发布')">
				<image class="releaseimg" :src="ossPath + '/upload/17117649896281040.png'"></image>
				<view class="retext">发布</view>
			</view>
			<view v-if="navIndex == 2" class="puadd" @click="sendFun('赛事发布')">
				<image class="releaseimg" :src="ossPath + '/upload/17117649896281040.png'"></image>
				<view class="retext">发布</view>
			</view>
			<!-- <image v-if="isend" class="endimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png"></image> -->
		</view>
		<view class="card" v-if="navIndex == 1">
			<view class="load" v-if="!load">
				<view style="text-align: center;">正在加载...</view>
				<!-- <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon> -->
			</view>
			<block v-else>
				<x-scroll :fixed="true" :isNav="true" @onRefresh="onRefresh(navIndex)"
					@scrolltolower="scrolltolower(navIndex)" :refresh="true" :heightFix="-90" :autoHeight="true">
					<view class="tit_" style="padding: 10rpx 36rpx 0;">
						<view class="tit_teacher">
							教练
						</view>
						<view class="lit" @click="nav_to('/pages/teacher/teacherList')">
							更多
							<uni-icons type="right" size="18" color="#333333"></uni-icons>
						</view>
					</view>
					<scroll-view class="scroll_wrap">
						<!-- <view class="scroll_item" >
							<view v-if="Array.isArray(teacher_list) && teacher_list.length" style="display: flex;">
								<view class="nav_card" v-for="item in teacher_list" :key="item.ID">
									<image :src="item.PhotoUrl"	mode="aspectFill"  @click.stop="toUser(item)"></image>
									<view class="navcard_info">
										<view class="name">
											{{item.TrueName}}
										</view>
									</view>
								</view>
							</view>
							<view class="null" v-else style="height: 10vh;">
								暂无教练
							</view>
						</view> -->
					</scroll-view>

					<view style="padding: 0rpx 36rpx;">
						<view class="tit_">
							教练课程
						</view>
						<block v-if="Array.isArray(classes_list) && classes_list.length">
							<view class="teacherbox" v-for="item in classes_list" :key="item.ID"
								@click="nav_to(`/pages/teacher/detail?id=${item.ID}`)">
								<image class="teacherimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
								<view class="contbox">
									<view class="title">{{ item.Title }}</view>
									<view class="technicianName">教练：{{ item.TechnicianName }}</view>
									<view class="tetimebox">
										<image class="tetimeimg"
											src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png">
										</image>
										<text class="tetime">
											{{ getTime2(item.ServerDate) + " " + getWeek(item.ServerDate) + item.ServerTime
											}}
										</text>
									</view>
									<view class="teaddrebox">
										<image class="teaddreimg"
											src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png">
										</image>
										<text class="teplace">{{ item.Place }}</text>
										<text class="tedis">{{ item.Distance > 100 ? '>100km' : item.Distance }}</text>
									</view>
									<view class="poplebox">
										<view class="polist" v-if="item.Item.length > 0">
											<image class="poimg" v-for="(value, index) in item.Item.slice(0, 3)"
												:key="index" :src="value.HeadImgUrl"></image>
										</view>
										<view class="memberbox">
											<text class="member">{{ item.Item.length }}</text>
											<text class="sum">/{{ item.PeopleNum }}</text>
										</view>

										<text class="baom">已报名</text>
										<view class="tiy">去体验</view>
									</view>
								</view>
							</view>
						</block>

						<view class="null" v-else>
							暂无教练课程，请耐心等待哦~~~
						</view>
					</view>
				</x-scroll>
			</block>

		</view>
		<view class="card" style="padding: 10rpx 36rpx 20rpx;" v-if="navIndex == 2">
			<view class="load" v-if="!load">
				<view style="text-align: center;">正在加载...</view>
				<!-- <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon> -->
			</view>
			<block v-else>
				<x-scroll :fixed="true" isNav @onRefresh="onRefresh(navIndex)" @scrolltolower="scrolltolower(navIndex)"
					:refresh="true" :heightFix="-90" :autoHeight="true">
					<block v-if="Array.isArray(party_list) && party_list.length">
						<view class="card_item" v-for="(l, i) in party_list" :key="i"
							@click="nav_to(`/pages/match/detail?id=${l.ID}`)">
							<view class="conbox">
								<image class="bannerimg" :src="l.Banner" mode="aspectFill"></image>
								<view class="textbox">
									<view class="destext">{{ l.Title }}</view>
									<view class="destimebox">
										<image class="destimeimg"
											src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png">
										</image>
										<text class="destetime">
											{{ formatDate(l.StartDate, 1) }}~{{ formatDate(l.EndDate, 2) }}
										</text>
									</view>
									<view class="desadderbox">
										<image class="desaddimg"
											src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png">
										</image>
										<text class="desadd">{{ l.Address }}</text>
									</view>

								</view>
								<view class="comimgbox">
									<view class="communbox" v-if="l.Communities.length > 0">
										<view v-for="(item, index) in l.Communities.slice(0, 3)" :key="index">
											<image class="comimg" :src="item.HeadImgUrl"></image>
										</view>
									</view>
									<view class="peplength">{{ l.Communities.length }}</view>
									<view class="limit">/无限</view>
									<view class="com">已报名</view>
									<view class="gotocom">去报名</view>
								</view>

							</view>
						</view>
					</block>
					<view class="null" v-else>
						暂无赛事，请耐心等待哦~~~
					</view>
				</x-scroll>
			</block>
		</view>
		<view class="card" v-if="navIndex == 0">

			<view class="load" v-if="!load">
				<view style="text-align: center;">正在加载...</view>
				<!-- <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon> -->
			</view>
			<block v-else>
				<x-scroll :fixed="true" isNav @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true">
					<view v-if="Array.isArray(list) && list.length > 0">
						<view class="contentbox" v-for="(item, index) in list" :key="index"
							@click="nav_to(`/pages/ball/ball_details?id=${item.ID}`)">
							<view class="titlebox">
								<text class="title">
									{{ item.Title }}
								</text>
								<text v-if="(item.Status == 0)" class="status">
									报名中
								</text>
								<text v-if="(item.Status == 1)" class="status">
									进行中
								</text>
								<text v-if="(item.Status == 2)" class="complete">
									已发奖励
								</text>
								<text v-if="(item.Status == 3)" class="complete">
									已结束
								</text>
							</view>
							<view class="timebox">
								<image class="timeimg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710916701041846.png">
								</image>
								<text class="time">{{ getTime2(item.ServerDate) + " " + getWeek(item.ServerDate) +
									item.ServerTime }}</text>
							</view>
							<view class="addressbox">
								<image class="addressimg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167160911428.png">
								</image>
								<text class="address">{{ item.Place }}</text>
								<text class="distance">距您{{ item.Distance }}km</text>
							</view>
							<view class="paymentbox">
								<image class="paymentimg"
									src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17109167294331333.png">
								</image>
								<text class="FeeRule">{{ item.FeeRule ? item.FeeRule : '--' }}</text>
							</view>
							<view class="userbox">
								<image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
								<text class="name">{{ item.Name }}</text>
								<!-- <view class="endroll" v-if="(item.Status==3)">已结束</view> -->
								<view v-if="(item.Status != 3)" @click.stop="subJoin(item.ID, item.UserID)" class="enroll">
									去报名</view>
							</view>
						</view>
						<view class="blank_space_view"></view>
					</view>
					<block v-else>
						<view class="noneContent">
							<image :src="ossPath + '/upload/17124806786111367.png'" mode="widthFix"></image>
							<text>最近组局不多,您可以试着发布一个</text>
						</view>
					</block>
				</x-scroll>
			</block>
		</view>
	</view>
</template>

<script>
import xScroll from "@/components/x-scroll/x-scroll.vue"
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
	components: {
		topStatus,
		xScroll
	},
	data() {
		return {
			isend: true,
			tabInd: 0, //tabId(0:发现,1:我的)
			btn_curr: '', //暂时没有用
			user: {}, //个人信息
			load: false, //是否加载
			_freshing: true, //是否开启下拉刷新功能
			selectorVisible: false, //暂时没有用
			city: "", //当前城市
			siftList: [], //日期
			PageIndex: 1, //页码
			PageSize: 10, //请求条数
			list: [], //(发现/我的)列表数组
			oldList: [], //旧数组(暂时不知道干吗)
			isMore: true, //是否加载更多
			latitude: null, //纬度
			CompanyID: 6002, //公司Id
			SortField: "", //排序字段
			SortType: "", //排序类型
			ServerDate: null, //日期查询

			nav: ['找好友'],
			navIndex: 0,
			navType: '',

			//赛事
			party_list: [],
			isParty: true,
			//教练
			teacher_list: [],

			//教练课
			classes_list: [],
			isClass: true,

			ossPath: '',
		};
	},
	watch: {
		// 暂时无用
		'btn_curr': function (newVal) {

			if (newVal === 'city') {
				this.SortField = "Distance";
				this.SortType = "ASC";
				this.list = [];
				this.oldList = [];
				this.getList();
			}

			if (newVal === 'time') {
				this.SortField = "Date";
				this.SortType = "ASC";
				this.list = [];
				this.oldList = [];
				this.getList();
			}

			if (newVal === 'now') {
				this.SortField = "NoAuditPeopleNum";
				this.SortType = "ASC";
				this.list = [];
				this.oldList = [];
				this.getList();
			}
		},
		//  tab标签发生变化
		tabInd(newVal) {

			this.init();
		}
	},
	async onShow() {
		let that = this

		uni.$on('getSelectCity', function (data) {
			if (data.name) {
				that.city = data.name || that.city
			}
		})

		await this.getCity();

		this.oldList = [];

		this.sel_tab(this.navIndex)
		await this.init();
	},
	async onLoad() {
		this.ossPath = this.$ossPath
		await this.getCity();

		if (await this.$store.getters.getLoginState) {
			// this.oldList = [];
			// await this.init();
		}
		uni.$on('send', () => {
			if (this.navIndex == 3 || this.navIndex == 4) {
				this.sel_tab(this.navIndex)
			}
		})

	},
	onUnload() {
		uni.$off('send')
	},
	methods: {
		whetherend(e) {
			if (e.detail.scrollLeft > 50) {
				this.isend = false
			} else {
				this.isend = true
			}
		},
		//去报名
		async subJoin(id, UserID) {

			let u = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});

			this.user = u.data;
			if (this.user.UserID == UserID) {
				this.$pv.msg('不能报名自己创建的运动');
				return
			}
			if (this.user.IsAuth == 0) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '未注册用户不能报名运动，请先注册账号',
					confirmText: "关闭",
					cancelText: "注册账号",
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							_this.nav_to('/pages/start/start2');
						}
					}
				});
			}

			if (this.user.IsAuth == 0)
				this.nav_to(`/pages/user/start2`);
			else
				this.nav_to(`/pages/ball/ball_join_confirm?id=${id}`);


		},
		sel_tab(index) {
			this.navIndex = index;

			if (this.navIndex == 0) {
				this.navType = '下场';
				this.PageIndex = 1;
				this.getList();
			} else if (this.navIndex == 3) {
				this.navType = '练习场';
				this.PageIndex = 1;
				this.getList();

			} else if (this.navIndex == 4) {
				this.navType = '模拟器';
				this.PageIndex = 1;
				this.getList();
			} else if (this.navIndex == 1) {
				this.PageIndex = 1;
				this.get_teacherlist();
				this.get_classlist();

			} else if (this.navIndex == 2) {
				this.PageIndex = 1;
				this.get_partylist();
			}

			// this.load = true;
		},
		async get_classlist() {
			let res = await this.$api.post('/Technicians/ClassList', { PageIndex: this.PageIndex, PageSize: this.PageSize });
			if (this.PageIndex == 1) this.classes_list = res.data
			else this.classes_list = this.classes_list.concat(this.classes_list)
			this.isClass = Array.isArray(res.data) && res.data.length >= this.PageSize;
			if (!this.classes_list) return
			this.classes_list.forEach(item => {
				if (!item.Images) return
				item.Images = JSON.parse(item.Images)
			})
		},
		async get_partylist() {
			let res = await this.$api.post('/Action/List', {
				ActType: '赛事',
				PageIndex: this.PageIndex,
				PageSize: this.PageSize
			});
			if (this.PageIndex == 1) this.party_list = res.data
			else this.party_list = this.party_list.concat(this.party_list)
			this.isParty = Array.isArray(res.data) && res.data.length >= this.PageSize;
			// this.party_list.forEach(item=>{
			// 	if(!item.Banner) return;
			// 	item.Banner = JSON.parse(item.Banner)
			// })
		},
		async get_teacherlist() {
			let res = await this.$api.post('/Technicians/Recommend');

			this.teacher_list = res.data
		},
		truncateString(str) {
			if (str.length > 10) {
				return str.substring(0, 10).concat('...');
			} else {
				return str;
			}
		},
		onShareAppMessage(res) { //发送给朋友
			let pid = uni.getStorageSync('user').UserID;
			let Name = uni.getStorageSync('user').Name;
			return {
				title: `${Name}向您推荐了动魅运动，赶快来报名吧`,
				path: `/pages/tab/home?pid=${pid}`,

			}
		},
		setServerDate(e) {

			if (e) {
				this.ServerDate = e.date;
				this.list = [];
				this.oldList = [];
				this.init();
			} else {
				this.ServerDate = null;
				this.list = [];
				this.oldList = [];
				this.init();
			}
		},

		toSelectCity() {
			const hotCitys = '';
			uni.navigateTo({
				url: '/pages/city/cityList'
			})
		},
		// 获取定位
		getLocationSysc() {
			let _this = this;
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						resolve(res)
					},
					fail: function (err) {

						const defaultLocation = {
							latitude: 0,
							longitude: 0
						};
						resolve(defaultLocation);
					}
				});
			})

		},
		// 获取当前地址并解析
		async getCity() {
			let loc = await this.getLocationSysc();

			let longitude = loc.longitude;
			this.longitude = loc.longitude;
			let latitude = loc.latitude;
			this.latitude = loc.latitude;
			let o = {
				longitude,
				latitude
			};
		},
		// 获取页面相关数据
		async init() {
			// 获取本地用户资料
			this.user = uni.getStorageSync('user');
			//  获取列表数据
			await this.getList();
			// 暂时不知
			await this.$api.post('/Common/Add_ViewPath', {
				Path: 'home',
				Platform: uni.getStorageSync('platform')
			});
			// 取消加载中
			// this.load = true;
		},
		publish(index) {
			if (this.user.IsAuth == 0)
				this.nav_to('/pages/start/start2');
			else
				this.nav_to('/pages/ball/ball_add?golfType=' + index);
		},
		sendFun(type) {
			if (this.user.IsAuth == 0) this.nav_to('/pages/start/start2')
			else {
				if (type == '教练发布') this.nav_to('/pages/teacher/send')
				if (type == '赛事发布') this.nav_to('/pages/match/send')
				if (type == '认证教练') this.nav_to(`/pages/teacher/Settled`)
			}
		},
		async toUser(item) {
			this.ran_to_add_ball(`/pages/user/user_visitor?id=${item.UserID}`);
		},
		async toSpheroid(item) {

			let res = await this.$api.post('User/GetUserInfo', {
				ID: uni.getStorageSync('user').UserID
			});

			let con = res.data;

			if (con.IsAuth == 0) {
				let _this = this;
				uni.showModal({
					title: '温馨提示',
					content: '非注册用户不能约球，请注册账号',
					confirmText: "关闭",
					cancelText: "注册账号",
					success: function (res) {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
						} else if (res.cancel) {
							_this.nav_to('/pages/start/start2');
						}
					}
				});
				return;
			}

			// if (con.UserType == "普通用户") {
			// 	this.$refs.member_upgrade.open();
			// 	return;
			// }

			if (this.ID === con.UserID) {
				this.$pv.msg('不能和自己约球');
				return;
			}
			this.ran_to_add_ball(`/pages/ball/spheroid?inviteId=${item.UserID}`);
		},
		//  获取发现列表数据
		async getList() {
			// 当前tabID为发现请求数据
			if (this.tabInd == 0) {
				// 参数对象
				let o = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					CompanyID: this.CompanyID,
					// GolfType: this.navType,
					City: this.city,
					User_Lng: this.longitude,
					User_Lat: this.latitude,
					ServerDate: this.ServerDate,
					SortField: this.SortField,
					SortType: this.SortType
				}
				//  当前日期为空清除ServerDate属性
				if (o.ServerDate == null) {
					delete o.ServerDate;
				}
				// 请求接口
				let res = await this.$api.post('Appointment/PageList', o);

				//发现数组赋值
				if (this.PageIndex == 1) {
					this.list = res.data
				} else {
					this.list = this.list.concat(res.data)
				}

				// 添加userIDList
				this.list.forEach(i => {
					i.userIDList = i.Item.map(a => a.UserID);
					i.PeopleCount = i.Item.filter(v => v.Status >= 1)
				});
				// 是否加载数据
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
				// 返回true
				this.load = true;
				return true;
			} else {
				// 当前tab为我的
				let o = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					CompanyID: this.CompanyID,
					City: this.city,
					User_Lng: this.longitude,
					User_Lat: this.latitude,
					ServerDate: this.ServerDate,
					SortField: this.SortField,
					SortType: this.SortType,
					UserID: this.user.UserID
				}
				if (o.ServerDate == null) {
					delete o.ServerDate;

				}

				let res = await this.$api.post('Appointment/PageList', o);

				// let list = res.data
				if (this.PageIndex == 1) {
					this.list = res.data
				} else {
					this.list = this.list.concat(res.data)
				}

				this.list.forEach(i => {
					i.userIDList = i.Item.map(a => a.UserID);
				});
				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;

				this.load = true;
				return true;
			}
		},
		// 我的列表数据相关处理(暂时不管)
		clearRepetition(arr, key = "id") {
			let newArr = [];
			arr.forEach(item => {
				let index;
				let check = newArr.every((newItem, i) => {
					if (item[key] !== newItem[key]) {
						index = -1;
						return true;
					} else {
						index = i;

						return false;
					}
				})
				if (check) {
					newArr.push(item);
				} else {
					newArr.splice(index, 1, item);
				}

			})

			return newArr;
		},
		//下拉刷新
		async onRefresh(index) {
			this.PageIndex = 1;
			if (index == 3) {
				await this.get_classlist()
			} else if (index == 4) {
				await this.get_partylist()
			} else {
				this.oldList = [];
				await this.getList()
			}
		},
		//滚动到底部触发
		async scrolltolower(index) {
			if (index == 3) {
				if (this.isClass) {
					this.PageIndex++;
					this.get_classlist()
				}
			} else if (index == 4) {
				if (this.isParty) {
					this.PageIndex++;
					this.get_partylist()
				}
			} else {
				if (this.isMore) {
					this.PageIndex++;
					this.getList();
				}
			}

		},
	},
	onUnload() {
		uni.$off('getSelectCity')
	},
	computed: {
		formatDate() {
			return (date1, type) => {
				const date = new Date(date1);
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				return type == 1 ? `${month}/${day} ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}` : `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
			};
		},
		getTime2() {
			return l => {
				let d = new Date(l);
				let timestamp = d.getTime();

				return this.$u.date(timestamp, 'mm-dd');
			}
		},

		getWeek() {
			return l => {
				let d = new Date(l);
				let week = d.getDay();
				let weelStr = week == 0 ? '星期天' : week == 1 ? '星期一' : week == 2 ? '星期二' : week == 3 ? '星期三' :
					week == 4 ?
						'星期四' : week == 5 ? '星期五' : '星期六';
				return weelStr;
			}
		}
	},
}
</script>

<style lang="scss">
.blank_space_view {
	// width: 100rpx;
	height: 200rpx;
}

page {
	background-color: #F6F6F6;
}

.home {
	position: relative;
	height: 100vh;
	overflow: hidden;
	padding-bottom: 80rpx;
}

.null {
	width: 100%;
	height: 20vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav_ {
	display: flex;
	align-items: center;
	z-index: 999;
	position: sticky;
	top: 0;
	background: #fff;
	position: relative;
}

.nav_item {
	padding: 24rpx 25rpx;
}

.nav_text {
	color: #999999;
}

.nav_active {
	color: #333333;
	font-weight: bold;
	position: relative;

	&:after {
		content: '';
		width: 30%;
		height: 8rpx;
		border-radius: 16rpx;
		background-color: #333333;
		position: absolute;
		left: 50%;
		bottom: 4rpx;
		transform: translate(-50%, -50%);
	}
}


.contentbox {
	width: 702rpx;
	min-height: 300rpx;
	margin: 24rpx 24rpx 0 24rpx;
	background-color: #fff;
	border-radius: 24rpx;
	padding-bottom: 20rpx;
	overflow: hidden;

	.titlebox {
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
		margin: 24rpx;

		.title {
			font-size: 36rpx;
			color: #333333;
			font-weight: 600;
		}

		.complete {
			width: 104rpx;
			height: 44rpx;
			background-color: #F4F4F4;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
			line-height: 44rpx;
		}

		.status {
			width: 104rpx;
			height: 44rpx;
			background-color: #E3FFE5;
			font-size: 24rpx;
			color: #39B240;
			text-align: center;
			line-height: 44rpx;
		}
	}

	.timebox {
		display: flex;
		margin: 0 24rpx;
		margin-bottom: 8rpx;

		.timeimg {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		.time {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.addressbox {
		display: flex;
		margin: 0 24rpx;
		margin-bottom: 8rpx;

		.addressimg {
			height: 32rpx;
			width: 32rpx;
			margin-right: 10rpx;
		}

		.address {
			font-size: 28rpx;
			color: #999999;
		}

		.distance {
			font-size: 28rpx;
			color: #999999;
			border-left: 1rpx solid #999999;
			margin-left: 10rpx;
			padding: 0 10rpx;
		}
	}

	.paymentbox {
		display: flex;
		margin: 0 24rpx;
		margin-bottom: 18rpx;

		.paymentimg {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		.FeeRule {
			color: #999999;
			font-size: 28rpx;
		}
	}

	.userbox {
		display: flex;
		margin: 0 24rpx;
		margin-bottom: 8rpx;
		align-items: center;
		position: relative;

		.userimg {
			width: 50rpx;
			height: 50rpx;
			margin-right: 14rpx;
			border-radius: 50%;
		}

		.name {
			color: #333333;
			font-size: 28rpx;
		}

		.enroll {
			width: 120rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			border-radius: 28rpx;
			background-color: #0D0D0D;
			color: #fff;
			font-size: 24rpx;
			position: absolute;
			right: 0;
			bottom: -6rpx;
		}

		.endroll {
			width: 120rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			border-radius: 28rpx;
			background-color: #BDBDBD;
			color: #fff;
			font-size: 24rpx;
			position: absolute;
			right: 0;
			bottom: -6rpx;
		}
	}
}

.card {
	.tit_ {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;

		.tit_teacher {
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}

		.lit {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.scroll_wrap {
		white-space: nowrap;
		margin-bottom: 30rpx;

		.scroll_item {
			display: flex;
			position: relative;
			margin: 0 28rpx;
		}

		.nav_card {
			border-radius: 16rpx;
			margin-right: 30rpx;

			image {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
			}

			.navcard_info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.name {
					color: #333333;
					text-align: center;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.lit {
					font-size: 26rpx;
					width: 100%;
				}
			}
		}

		.nav_card:last-child {
			margin-right: 0;
		}

		.more {
			position: absolute;
			width: 40rpx;
			height: 92%;
			right: -36rpx;
			top: 0;
			display: flex;
			font-size: 26rpx;
			justify-content: center;
			box-sizing: border-box;
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.teacherbox {
		width: 652rpx;
		height: 332rpx;
		background-color: #fff;
		margin: 24rpx 32rpx 24rpx 32rpx;
		position: relative;
		border-radius: 24rpx;
		padding: 24rpx 20rpx 24rpx 208rpx;
		box-sizing: border-box;

		.teacherimg {
			position: absolute;
			top: 24rpx;
			left: -32rpx;
			width: 220rpx;
			height: 284rpx;
			border-radius: 16rpx;
		}

		.contbox {
			.title {
				font-size: 36rpx;
				color: #333333;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			.technicianName {
				color: #D4A553;
				font-size: 24rpx;
				margin-bottom: 38rpx;
			}

			.tetimebox {
				display: flex;
				align-items: center;

				.tetimeimg {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				.tetime {
					font-size: 22rpx;
					color: #999999;
				}
			}

			.teaddrebox {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				.teaddreimg {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				.teplace {
					width: 308rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 22rpx;
					color: #999999;
				}

				.tedis {
					font-size: 22rpx;
					color: #999999
				}
			}

			.poplebox {
				height: 60rpx;
				display: flex;
				border-radius: 29rpx;
				align-items: center;
				background: linear-gradient(90deg, #fff 0%, #F6F6F6 100%);
				position: relative;

				.polist {
					width: 108rpx;
					display: flex;
					margin-right: 5rpx;

					.poimg {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						margin-left: -14rpx;
					}

					.poimg:first-child {
						margin-left: 0;
					}
				}

				.memberbox {
					display: flex;

					.member {
						font-size: 22rpx;
						color: #D4A553;
					}

					.sum {
						font-size: 22rpx;
						color: #999999;
					}
				}

				.baom {
					margin-left: 8rpx;
					font-size: 22rpx;
					color: #D4A553;
				}

				.tiy {
					position: absolute;
					right: 0;
					width: 112rpx;
					height: 64rpx;
					background-color: #0D0D0D;
					font-size: 24rpx;
					text-align: center;
					line-height: 64rpx;
					color: #fff;
					border-radius: 31rpx;
				}
			}
		}
	}

	.card_item {
		width: 652rpx;
		height: 332rpx;
		background-color: #fff;
		margin: 18rpx 41rpx;

		.conbox {
			width: 652rpx;
			height: 332rpx;
			position: relative;
			// border-radius: 24rpx;
			border-radius: 0 24rpx 24rpx 0;
			box-sizing: border-box;
			padding: 18rpx 0;

			.bannerimg {
				width: 222rpx;
				height: 284rpx;
				position: absolute;
				top: 24rpx;
				left: -38rpx;
				z-index: 1000;
				border-radius: 16rpx;
			}

			.textbox {
				width: 432rpx;
				margin: 0 203rpx;

				.destext {
					font-size: 32rpx;
					color: #333333;
					margin-bottom: 50rpx;
					margin-right: 20rpx;
				}

				.destimebox {
					display: flex;
					margin-bottom: 10rpx;

					.destimeimg {
						width: 20rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}

					.destetime {
						font-size: 22rpx;
						color: #999999;
					}
				}

				.desadderbox {
					display: flex;
					margin-bottom: 10rpx;

					.desaddimg {
						width: 18rpx;
						height: 22rpx;
						margin-right: 10rpx;
					}

					.desadd {
						font-size: 22rpx;
						color: #999999;
					}
				}
			}

			.comimgbox {
				display: flex;
				align-items: center;
				width: 432rpx;
				margin: 0 205rpx;

				.communbox {
					display: flex;
					margin-right: 13rpx;

					.communbox .comimg:first-child {
						margin-left: 0;
					}

					.comimg {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						margin-left: -12rpx;
					}
				}

			}

			.peplength {
				font-size: 22rpx;
				color: #D4A553;
			}

			.limit {
				font-size: 22rpx;
				color: #999999;
				margin-right: 10rpx;
			}

			.com {
				font-size: 22rpx;
				color: #D4A553;
			}

			.gotocom {
				width: 112rpx;
				height: 64rpx;
				border-radius: 31rpx;
				background-color: #0D0D0D;
				font-size: 24rpx;
				text-align: center;
				line-height: 64rpx;
				margin-left: 46rpx;
				color: #fff;
			}
		}

	}
}

.fix {
	position: relative;
	background-color: #fff;
	width: 750rpx;
	top: 0;
	left: 0;
	z-index: 999;

	.endimg {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		z-index: 1000;
		right: 150rpx;
		bottom: 28rpx;
	}

	.puadd {
		position: absolute;
		right: 32rpx;
		bottom: 24rpx;
		display: flex;
		align-items: center;
		z-index: 1000;

		.releaseimg {
			width: 32rpx;
			height: 32rpx;
		}

		.retext {
			font-size: 32rpx;
			color: #333333;
		}
	}
}

.tabs {
	box-sizing: border-box;
	z-index: 200;
	height: 44px;
	width: 750rpx;
	display: flex;
	align-items: center;
	background: #fff;

	.city {
		height: 40rpx;
		width: 160rpx;
		margin-right: 6rpx;
		display: flex;

		.link-1 {
			max-width: 96rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;

			.linkcity {
				color: #333333;
			}
		}
	}

	.img2 {
		height: 36rpx;
		width: 36rpx;
		margin-right: 266rpx;

		.zuju {
			color: #333333;
			font-size: 36rpx;
		}
	}

	.tab1,
	.tab2 {
		font-size: 32rpx;
		margin-right: 52rpx;
		line-height: 44px;
		font-weight: 700;
		color: #999999;
	}

	.tab4 {
		color: #333333;
		position: relative;
	}
}




.home {
	.top {
		position: sticky;
		top: 0;
		z-index: 999;
		background: #1F1F1F;

		.nav {
			height: 44px;
			line-height: 44px;
		}
	}




}

.noneContent {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin-top: 60rpx;
	font-size: 26rpx;

	>image {
		width: 120rpx;
	}

	>text {

		color: #BDBDBD;
	}
}
</style>